<template>
  <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
    <ol>
      <li><span class="menu-child-category">Form</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/autocomplete/" class=""><span>AutoComplete</span></a>
              </li>
            <li><a href="/calendar/" class=""><span>Calendar</span></a></li>
            <li><a href="/cascadeselect/" class=""><span>CascadeSelect</span></a>
              </li>
            <li><a href="/checkbox/" class=""><span>Checkbox</span></a></li>
            <li><a href="/chips/" class=""><span>Chips</span></a></li>
            <li><a href="/colorpicker/" class=""><span>ColorPicker</span></a>
            </li>
            <li><a href="/dropdown/" class=""><span>Dropdown</span></a></li>
            <li><a href="/editor/" class=""><span>Editor</span></a></li>
            <li><a href="/inputgroup/" class=""><span>InputGroup</span></a>
            </li>
            <li><a href="/inputmask/" class=""><span>InputMask</span></a></li>
            <li><a href="/inputnumber/" class="router-link-active router-link-exact-active"
                                 aria-current="page"><span>InputNumber</span></a></li>
            <li><a href="/inputswitch/" class=""><span>InputSwitch</span></a>
            </li>
            <li><a href="/inputtext/" class=""><span>InputText</span></a></li>
            <li><a href="/knob/" class=""><span>Knob</span></a></li>
            <li><a href="/listbox/" class=""><span>Listbox</span></a></li>
            <li><a href="/multiselect/" class=""><span>MultiSelect</span></a>
            </li>
            <li><a href="/password/" class=""><span>Password</span></a></li>
            <li><a href="/radiobutton/" class=""><span>RadioButton</span></a>
            </li>
            <li><a href="/rating/" class=""><span>Rating</span></a></li>
            <li><a href="/selectbutton/" class=""><span>SelectButton</span></a>
              </li>
            <li><a href="/slider/" class=""><span>Slider</span></a></li>
            <li><a href="/textarea/" class=""><span>Textarea</span></a></li>
            <li><a href="/togglebutton/" class=""><span>ToggleButton</span></a>
              </li>
            <li><a href="/treeselect/" class=""><span>TreeSelect</span></a>
            </li>
            <li><a href="/tristatecheckbox/" class=""><span>TriStateCheckbox</span></a>
              </li></ol>
        </div>
      </li>
      <li><span class="menu-child-category">Button</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/button/" class=""><span>Button</span></a></li>
            <li><a href="/speeddial/" class=""><span>Speed Dial</span></a>
            </li>
            <li><a href="/splitbutton/" class=""><span>SplitButton</span></a>
            </li></ol>
        </div>
      </li>
      <li><span class="menu-child-category">Data</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/datatable/" class=""><span>DataTable</span></a></li>
            <li><a href="/dataview/" class=""><span>DataView</span></a></li>
            <li><a href="/orderlist/" class=""><span>OrderList</span></a></li>
            <li><a href="/organizationchart/" class=""><span>Org Chart</span></a>
              </li>
            <li><a href="/paginator/" class=""><span>Paginator</span></a></li>
            <li><a href="/picklist/" class=""><span>PickList</span></a></li>
            <li><a href="/tree/" class=""><span>Tree</span></a></li>
            <li><a href="/treetable/" class=""><span>TreeTable</span></a></li>
            <li><a href="/timeline/" class=""><span>Timeline</span></a></li>
            <li><a href="/virtualscroller/" class=""><span>VirtualScroller</span></a>
              </li></ol>
        </div>
      </li>
      <li><span class="menu-child-category">Panel</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/accordion/" class=""><span>Accordion</span></a></li>
            <li><a href="/card/" class=""><span>Card</span></a></li>
            <li><a href="/deferredcontent/" class=""><span>Deferred</span></a>
            </li>
            <li><a href="/divider/" class=""><span>Divider</span></a></li>
            <li><a href="/fieldset/" class=""><span>Fieldset</span></a></li>
            <li><a href="/panel/" class=""><span>Panel</span></a></li>
            <li><a href="/scrollpanel/" class=""><span>ScrollPanel</span></a>
            </li>
            <li><a href="/splitter/" class=""><span>Splitter</span></a></li>
            <li><a href="/tabview/" class=""><span>TabView</span></a></li>
            <li><a href="/toolbar/" class=""><span>Toolbar</span></a></li>
            </ol>
        </div>
      </li>
      <li><span class="menu-child-category">Overlay</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/confirmdialog/" class=""><span>ConfirmDialog</span></a>
              </li>
            <li><a href="/confirmpopup/" class=""><span>ConfirmPopup</span></a>
              </li>
            <li><a href="/dialog/" class=""><span>Dialog</span></a></li>
            <li><a href="/dynamicdialog/" class=""><span>DynamicDialog</span></a>
              </li>
            <li><a href="/overlaypanel/" class=""><span>OverlayPanel</span></a>
              </li>
            <li><a href="/sidebar/" class=""><span>Sidebar</span></a></li>
            <li><a href="/tooltip/" class=""><span>Tooltip</span></a></li>
            </ol>
        </div>
      </li>
      <li><span class="menu-child-category">File</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/fileupload/" class=""><span>Upload</span></a></li>
            </ol>
        </div>
      </li>
      <li><span class="menu-child-category">Menu</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/breadcrumb/" class=""><span>Breadcrumb</span></a>
            </li>
            <li><a href="/contextmenu/" class=""><span>ContextMenu</span></a>
            </li>
            <li><a href="/dock/" class=""><span>Dock</span></a></li>
            <li><a href="/menu/" class=""><span>Menu</span></a></li>
            <li><a href="/menubar/" class=""><span>Menubar</span></a></li>
            <li><a href="/megamenu/" class=""><span>MegaMenu</span></a></li>
            <li><a href="/panelmenu/" class=""><span>PanelMenu</span></a></li>
            <li><a href="/steps/" class=""><span>Steps</span></a></li>
            <li><a href="/tabmenu/" class=""><span>TabMenu</span></a></li>
            <li><a href="/tieredmenu/" class=""><span>TieredMenu</span></a>
            </li></ol>
        </div>
      </li>
      <li><span class="menu-child-category">Chart</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/chart/" class=""><span>Chart.js</span></a></li>
            </ol>
        </div>
      </li>
      <li><span class="menu-child-category">Messages</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/message/" class=""><span>Message</span></a></li>
            <li><a href="/inlinemessage/" class=""><span>InlineMessage</span></a>
              </li>
            <li><a href="/toast/" class=""><span>Toast</span></a></li>
          </ol>
        </div>
      </li>
      <li><span class="menu-child-category">Media</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/carousel/" class=""><span>Carousel</span></a></li>
            <li><a href="/galleria/" class=""><span>Galleria</span></a></li>
            <li><a href="/image/" class=""><span>Image</span></a></li>
          </ol>
        </div>
      </li>
      <li><span class="menu-child-category">Misc</span>
        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
          <ol>
            <li><a href="/avatar/" class=""><span>Avatar</span></a></li>
            <li><a href="/badge/" class=""><span>Badge</span></a></li>
            <li><a href="/blockui/" class=""><span>BlockUI</span></a></li>
            <li><a href="/chip/" class=""><span>Chip</span></a></li>
            <li><a href="/focustrap/" class=""><span>FocusTrap</span></a></li>
            <li><a href="/inplace/" class=""><span>Inplace</span></a></li>
            <li><a href="/scrolltop/" class=""><span>ScrollTop</span></a></li>
            <li><a href="/skeleton/" class=""><span>Skeleton</span></a></li>
            <li><a href="/progressbar/" class=""><span>ProgressBar</span></a>
            </li>
            <li><a href="/progressspinner/" class=""><span>ProgressSpinner</span></a>
              </li>
            <li><a href="/animateonscroll/" class=""><span>AnimateOnScroll</span></a>
              </li>
            <li><a href="/ripple/" class=""><span>Ripple</span></a></li>
            <li><a href="/styleclass/" class=""><span>StyleClass</span></a>
            </li>
            <li><a href="/tag/" class=""><span>Tag</span></a></li>
            <li><a href="/terminal/" class=""><span>Terminal</span></a></li>
            </ol>
        </div>
      </li></ol>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import primeVueConfigMap from "@/config"
import * as all from "@/config/config"

const keys = Object.keys(all) || []
const components = {};
keys.forEach((k) => {
  if (k.indexOf("Components") > 0) {
    const list = all[k];
    for (const l of list) {
      components[l.__config__.tag] = l;
    }
  }
})

onMounted(() => {
  const all = []
  for (const section of document.getElementsByClassName("menu-child-category")) {
    const childrenNode = section.parentNode.querySelectorAll("div ol li");
    const children = [];
    const item = {title:section.textContent.trim(),children}
    for (const c of childrenNode) {
      const name=c.textContent.trim();
      const underlineName=toUnderline(name);
      if(primeVueConfigMap[underlineName]) {
        children.push({
          name, key: name, children: [{
            __id__: toUnderline(name),
          }]
        })
      }
    }
    all.push(item)
  }
  console.info(JSON.stringify(all, null, 2).replace(/\"(.[^-\"]*?)\":/g, '$1:'));
})
function toUnderline(str) {
  str = str.replace(/([A-Z])/g, '-$1').toLowerCase();
  if (str.indexOf("-") == 0) {
    str = str.substring(1);
  }
  return str;
}
</script>

<style scoped>

</style>
